<template>
	<view>
		<scroll-view scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="order_container">
				<view class="content pt10">
					<view class="content_item d-flex j-sb">
						<view style="width: 160rpx;height: 160rpx;">
							<u--image :showLoading="true" :src="productData.productPic.split('&')[0]" width="160rpx"
								height="160rpx"></u--image>
						</view>
						<view style="width: 460rpx;height: 160rpx;" class="d-flex flex-column j-sb ml10">
							<view class="title_item">{{productData.productName}}</view>
							<view class="d-flex a-center j-sb value_item">
								<view>{{productData.productPrice}}元</view>
								<view style="font-size: 12px;">x{{productData.num}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="zk mt15" v-if="productData.pageType==1 ||productData.pageType==2">
					<view class="zk_item d-flex flex-column j-sb">
						<view class="d-flex a-center j-sb value_item">
							<view>订单金额：</view>
							<view style="font-size: 12px;">{{productData.orderAmount}}元</view>
						</view>
						<view class="d-flex a-center j-sb value_item">
							<view>实付金额：</view>
							<view style="font-size: 12px;">{{productData.realAmount}}元</view>
						</view>
					</view>
				</view>

				<view class="ps mt15" v-if="productData.pageType==1 ||productData.pageType==2">
					<view class="bottom-item" @click="psClick()">
						<view class="content">
							<view class="title">配送方式</view>
						</view>
						<view class="d-flex a-center">
							<view class="mr5 ps_value">{{ deliveryValue }}</view>
							<uni-icons type="forward" size="20" color="#999999"></uni-icons>
						</view>
					</view>
				</view>

				<view class="ps_type mt15" v-if="productData.pageType==0 ||productData.pageType==2">
					<view class="ps_type_box" @click="openDatetime()">
						<view class="bottom-item mb10">
							<view class="content">
								<view v-if="productData.pageType==0">选择预约时间</view>
								<view v-else class="title">填写上门时间</view>
							</view>
							<view class="d-flex a-center">
								<uni-icons type="forward" size="20" color="#999999"></uni-icons>
							</view>
						</view>
						<view class="content_value">
							{{dayTime}}
						</view>
					</view>
				</view>

				<view class="ps_type mt15" v-if="productData.pageType==1 ||productData.pageType==2">
					<view class="ps_type_box">
						<view class="bottom-item mb10">
							<view class="content">
								<view class="title">选择收货地址</view>
							</view>
							<view class="d-flex a-center">
								<!-- <uni-icons type="forward" size="25" color="#999999"></uni-icons> -->
							</view>
						</view>
						<view class="content_value">
							{{productData.address.receiverArea}}{{productData.address.detailAdress}}
						</view>
					</view>
				</view>

				<view class="d-flex a-center j-center mt30 mybutton">
					<u-button v-if="productData.pageType == 0" type="primary" color="#38D19A" text="立即预约"
						@click="openPayPage()"></u-button>
					<u-button v-else type="primary" color="#38D19A" text="立即支付" @click="openPayPage()"></u-button>
				</view>

				<u-action-sheet :actions="list" :show="psShow" @select="selectClick()" cancelText="取消"
					@close="close()"></u-action-sheet>

				<edwinTime ref="chooseTime" title="请选择预约时间" @change="changeTime()"></edwinTime>

				<u-popup :show="popupShow" closeable="true" closeIconPos="top-right" @open="popupShow = true"
					@close="closePopup()">
					<view class="myPopup">
						<view class="mb10">
							<view class="content_item d-flex flex-column j-sb">
								<view class="d-flex a-center j-sb mb10">
									<view>客户名称</view>
									<view>{{goods_info.customerName}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>客户等级</view>
									<view>{{goods_info.levelName}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>钱包余额</view>
									<view>{{goods_info.remaingAmount}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>订单总额</view>
									<view>{{goods_info.orderAmount}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>折扣金额</view>
									<view>{{goods_info.discountAmount}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>实付总额</view>
									<view>{{goods_info.realAmount}}</view>
								</view>
							</view>
						</view>
						<view class="d-flex a-center j-center mt20 mybutton mb20">
							<u-button type="primary" color="#38D19A" text="立即支付" @click="instantlyPayPage()"></u-button>
						</view>
					</view>
				</u-popup>
				<u-toast ref="uToast"></u-toast>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		goToOrderPreparationPageByApp,
		generateOrderByCustomerApp,
		balancePaymentByApp
	} from "@/api/index.js"
	import edwinTime from '@/components/edwin-time/edwin-time.vue';

	export default {
		components: {
			edwinTime
		},
		onLoad(opt) {
			this.productCode = opt.productCode
		},
		onShow() {
			// this.userInfo = uni.getStorageSync('userInfo')
			this.goToOrderPreparationPageByApp()
		},
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				productCode: "",
				productData: {},
				indexList: [],
				list: [{
						id: "0",
						name: '上门',
						color: '',
						fontSize: '20'
					},
					{
						id: "1",
						name: '到店取',
						color: '',
						fontSize: '20'
					}
				],
				deliveryValue: "",
				deliveryMethod: "",
				psShow: false,
				dayTime: '',

				popupShow: false,
				goods_info: {}
			};
		},
		methods: {
			goToOrderPreparationPageByApp() {
				goToOrderPreparationPageByApp({
					productCode: this.productCode,
					customerCode: this.userInfo.customerCode
				}).then(res => {
					this.productData = res.object
				})
			},
			psClick() {
				this.psShow = true
				console.log(this.psShow);
			},
			selectClick(index) {
				this.deliveryMethod = index.id
				this.deliveryValue = index.name
				this.psShow = false
			},
			close() {
				this.psShow = false
			},
			//选择的时间
			changeTime(e) {
				this.dayTime = e.value
			},
			// 打开时间组件
			openDatetime() {
				this.$refs.chooseTime.open()
			},
			openPayPage() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const obj = {
					addressCode: '',
					customerCode: that.userInfo.customerCode,
					resveDate: that.dayTime,
					deliveryMethod: that.deliveryMethod,
					itemList: [{
						productCode: that.productCode,
						stock: that.productData.num
					}]
				}
				generateOrderByCustomerApp({
					order: JSON.stringify(obj)
				}).then(res => {
					if (res.object.pageType == 0) {
						uni.hideLoading()

						that.$refs.uToast.show({
							type: "success",
							duration: "1000",
							message: res.message,
							complete() {
								uni.setStorageSync("make", "1")
								uni.switchTab({
									url: '/pages/makeAnAppointment/index'
								});
							}
						})
					
					} else {
						that.goods_info = res.object
						that.popupShow = true
					}
				})
			},


			// 立即支付
			instantlyPayPage() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				balancePaymentByApp({
					customerCode: that.userInfo.customerCode,
					orderCode: that.goods_info.orderCode
				}).then(res => {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/order/orderDetails?orderCode=' + that.goods_info.orderCode
					});
				})
			},

			closePopup() {
				this.popupShow = false
				uni.switchTab({
					url: '/pages/order/order',
					success: (res) => {
						uni.setStorageSync('tabCurrent', 1);
					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: parseInt(1)
				});
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scopeds>
	page {
		// background-color: #f1f3f5;
	}

	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.order_container {
		height: 100vh;
		background-color: #f5f5f5;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				width: 700rpx;
				height: 220rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				background-color: #fff;
				padding: 30rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 36rpx;
					color: #666666;
					font-weight: 500;
				}
			}
		}


		.zk {
			display: flex;
			flex-direction: column;
			align-items: center;


			.zk_item {
				width: 700rpx;
				height: 180rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				background-color: #fff;
				padding: 30rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 36rpx;
					color: #666666;
					font-weight: 500;
				}
			}
		}


		.ps {
			display: flex;
			flex-direction: column;
			align-items: center;


			.bottom-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 700rpx;
				height: 100rpx;
				padding: 26rpx 26rpx;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

				.content {
					display: flex;
					align-items: center;

					.title {
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.ps_value {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.ps_type {
			display: flex;
			flex-direction: column;
			align-items: center;

			.ps_type_box {
				width: 700rpx;
				height: 200rpx;
				background: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				box-sizing: border-box;
				padding: 26rpx 26rpx;
			}

			.bottom-item {
				display: flex;
				align-items: center;
				justify-content: space-between;


				.content {
					display: flex;
					align-items: center;

					.title {
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.ps_value {
					font-size: 28rpx;
					color: #999999;
				}
			}

			.content_value {
				width: 700rpx;
				height: 100rpx;
			}
		}

		.mybutton button {
			width: 80%;
		}


		.myPopup {
			// height: 600rpx;
			box-sizing: border-box;
			padding: 80rpx 60rpx 0 60rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-500;

			.title {
				font-size: 40rpx;
				color: #333333;
				font-weight: 500;
			}

			.content_item {
				font-size: 32rpx;
				color: #666666;
				font-weight: 400;
			}

			.mybutton button {
				width: 50%;
			}
		}
	}
</style>